<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="#" num="0">点我</a>
    <div id="cha">
        <span>黄蜀郎</span>
        <!-- This is comment -->
        <p></p>
        <b></b>
    </div>
    <div id="one" class="two"></div>
    <script>
        //             什么是DOM
        // 1.DOM-->Document Object Model文档对象模型
        // 2.DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，
        // 用来操作HTML和XML功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口


        // DOM->一切方法的集合，用于操作HTML和XML（不能操作CSS）
        //             DOM基本操作
        // 1.对节点的增删改查
        //   查
        //       查看元素节点
        //            document代表整个文档流
        //            document.getElementById()元素id在ie8以下的浏览器，不区分id大小写
        //            而且也返回匹配name的属性元素
        //            .getElementByTagName()//标签名
        //            .getElementByName();//需注意，只有部分标签name可生效（表单，表单元素，img，ifram）
        //            .getElementByClassName();//类名->ie8和ie8以下的ie版本中没有，可以多个class一起
        //            .querySelector()//css选择器 在ie7和ie7以下的版本中没有(选一个)
        //            .querySelectorAll()//css选择器 在ie7和ie7以下的版本中没有(选一组)
        //             上面两个不是实时的（选择的相当于副本）
        // var div = document.getElementsByTagName('div')[0];
        // var div = document.getElementById('cha');
        // var newDiv = document.createElement('div');//创建标签
        // var div = document.querySelector('div > span');
        // div.style.color = 'orange';
        // div.style.fontSize = '30px';


        //             遍历节点树
        //   parentNode->父节点(最顶端的parentNode为#document);
        //   children->获取元素的子元素集合
        //   childNodes->子节点们
        //   firstChild->第一个子节点
        //   lastChild->最后一个子节点
        //   nextSibling->后一个兄弟节点
        //   previousSibling->前一个兄弟节点
        //   节点的类型
        //       元素节点-----1(节点的返回值)
        //       属性节点-----2
        //       文本节点-----3
        //       注释节点-----8
        //       document----9
        //       DocumentFragment-----11

        // children 属性与 childNodes 属性的差别：
        // childNodes 属性返回所有的节点， 包括文本节点、 注释节点；
        // children 属性只返回元素节点；

        // var div = document.getElementsByTagName('div')[0];
        // console.log(div.childNodes.length);


        //             基于元素节点树的遍历
        //   parentElement->返回当前元素的父元素节点
        //   children->只返回当前元素的元素子节点
        //   node.childElementCount === node.children.length当前元素节点的子元素节点个数（IE不兼容）
        //   firstElementChild->返回的是第一个元素节点（IE不兼容）
        //   lastElementChild->返回的是最后一个元素节点（IE不兼容）
        //   nextElementSibling/previousElementSibling->返回后一个/前一个兄弟元素节点（IE不兼容）
        // var div = document.getElementsByTagName('div')[0];
        // console.log(div.children);


        //   节点的四个属性
        //       nodeName: 
        //            元素的标签名，以大写形式表示，只读
        //       nodeValue:
        //            Text节点或Comment节点的文本内容，可读写
        //       nodeType:
        //            该节点的类型，只读
        //       attributes
        //            Elenent节点的属性集合
        // var Div = document.getElementsByTagName('div')[1];
        // Div.attributes;
        // console.log(Div.attributes);
        // console.log(Div.attributes[0]);
        // console.log(Div.attributes[1]);


        //   节点的一个方法Node.hasChildNodes();
        // var div = document.getElementsByTagName('div')[0];

        // function retElementChild(node) {
        //     // no children
        //     var temp = {
        //             length: 0,
        //             push: Array.prototype.push,
        //             splice: Array.prototype.splice
        //         },
        //         child = node.childNodes,
        //         len = child.length;
        //     for (var i = 0; i < len; i++) {
        //         if (child[i].nodeType === 1) {
        //             temp.push(child[i]);
        //         }
        //     }
        //     return temp;
        // }
        // console.log(retElementChild(div));


        // 增
        //    document.createElement();//创建元素节点
        //    document.createTextNode();//创建文本节点
        //    document.createComment();//创建注释节点
        //    document.createDocumentFragment();//创建文档碎片节点
        // 插
        //    PARENTNODE.appendChild();//插入到页面中（剪切操作）
        //    PARENTNODE.insertBefore(a,b);//必须在父级下操作，把A插入到B前面
        // 删
        //    parent.removeChild();//父级控制删除
        //    parent.remove();//销毁自身
        // 替换
        //    parent.replaceChild(new,origin);//拿新元素替换老元素


        // var div = document.createElement('div'); //创建一个div
        // document.body.appendChild(div); //把div加入到页面中去
        // div.innerHTML = '奥里给'; //给div加个内容
        // var text = document.createTextNode('黄鼠狼');
        // document.body.appendChild(text);


        // Element节点的一些属性
        //    innerHTML //改变HTML里的内容
        //    innerText(低版本火狐不兼容)/textContent(老版本IE不好使)
        // Element节点的一些方法
        //    ele.setAttribute('class','demo');//设置 前面属性名后面属性值
        //    ele.getAttribute();//取行间属性的值

        // var a = document.getElementsByTagName('a')[0];
        // a.onclick = function() {
        //     console.log(this.getAttribute('num'));
        // }


        // 请编写一段JavaScript脚本生成下面这段DOM结构。
        // 要求：使用标准的DOM方法或属性
        // <div class="example">
        //    <p class="slogan">老母猪</p>
        // <div>
        // 提示：dom.className可以读写class
        // var div = document.createElement('div');
        // var p = document.createElement('p');
        // div.setAttribute('class', 'example');
        // p.setAttribute('class', 'slogan');
        // var text = document.createTextNode('老母猪');
        // p.appendChild(text);
        // div.appendChild(p);
        // document.body.appendChild(div);


        // 1.封装函数insretAfter();功能类似insertBefore();
        // 提示：可忽略老版本浏览器，直接在Element.prorotype上编程
        // Element.prototype.inserAfter = function(targetNode, afterNode) {
        //     var beforeNode = afterNode.nextElementSibling;
        //     if (beforeNode == null) {
        //         this.appendChild(targetNode);
        //     } else {
        //         this.insertBefore(targetNode, beforeNode);
        //     }
        // }
        // var div = document.getElementsByTagName('div')[0];
        // var span = document.getElementsByTagName('span')[0];
        // var b = document.getElementsByTagName('b')[0];
        // var a = document.createElement('a');
        // div.inserAfter(a, span);
        // console.log(div);
        // 2.将目标节点内部的节点顺序逆序
        //   eg:<div><a></a><em></em></div>
        //      <div><em></em><a></a></div>
    </script>

</body>

</html>